import { useState } from "react"
import { useEffect, useLayoutEffect } from "react"

export default function UseLayoutEffect1() {
  const [count, setCount] = useState(0)
  const onTest = () => {
    if (count === 0) {
      setCount(Math.random() + 99)
    }
  }
  // useEffect(()=>{
  //   onTest(); // 这里会闪烁，类似于v-clack,充分说明比dom更新要晚
  //   console.log('useEffect执行')
  // })
  useLayoutEffect(() => {
    onTest()
    console.log("useLayoutEffect执行")
  })
  return (
    <div>
      <h4>
        执行时机：react生成虚拟dom => useLayoutEffect => 渲染到dom显示 =>
        useEffect
      </h4>
      <button onClick={() => setCount(0)}>加1</button>
      <p>{count}</p>
    </div>
  )
}
